<template>
    <div class="gzzd_wrap">
        <div class="page-content">
            <div class="top-panel">
                <div class="item-box">
                    <div class="item-num">30</div>
                    <div class="item-label">诊断次数</div>
                </div>
                <div class="item-box">
                    <div class="item-num">86.67<span>%</span></div>
                    <div class="item-label">总检测率</div>
                </div>

                <div class="item-box">
                    <div class="item-img"></div>
                    <el-progress :percentage="30"></el-progress>
                    <div class="tooltip-box" style="left: 30%;">30% 故障2 诊断5次</div>
                </div>
            </div>

            <div class="bottom-panel">
                <div class="table-head">
                    <span>故障名称</span>
                    <span>测试次数</span>
                    <span>测试数据</span>
                    <span>诊断结果</span>
                    <span>状态</span>
                </div>

                <div class="table-body">
                    <div class="left-panel">
                        <div class="item-box">
                            <el-progress type="circle"
                                         :percentage="88"
                                         :stroke-width="10"
                                         :width="120"
                                         color="#2C50EE"
                            ></el-progress>
                            <div class="info-box">
                                <div class="info-row">
                                    <span class="info-row-label">故障类型：</span>
                                    <span class="info-row-num">故障1</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">诊断次数：</span>
                                    <span class="info-row-num">25</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">正确数：</span>
                                    <span class="info-row-num">22</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">检测率：</span>
                                    <span class="info-row-num">88%</span>
                                </div>
                            </div>
                        </div>
                        <div class="item-box">
                            <el-progress type="circle"
                                         :percentage="88"
                                         :stroke-width="10"
                                         :width="120"
                                         color="#35C759"
                            ></el-progress>
                            <div class="info-box">
                                <div class="info-row">
                                    <span class="info-row-label">故障类型：</span>
                                    <span class="info-row-num">故障1</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">诊断次数：</span>
                                    <span class="info-row-num">25</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">正确数：</span>
                                    <span class="info-row-num">22</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-row-label">检测率：</span>
                                    <span class="info-row-num">88%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-panel">
                        <vue-scroll :ops="$root.scrollOpsY">
                            <!--is_red-->
                            <div class="table-tr " v-for="item in 14">
                                <span class="table-td">3</span>
                                <span class="table-td">F0-19</span>
                                <span class="table-td">故障1</span>
                                <span class="table-td">诊断正确</span>
                            </div>
                        </vue-scroll>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .gzzd_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 20px;

            >.top-panel {
                width: 100%;
                height: 140px;
                background: #FFFFFF;
                border-radius: 8px;
                margin-bottom: 28px;
                padding: 40px 40px 40px 50px;
                box-sizing: border-box;

                >.item-box {
                    display: inline-block;
                    vertical-align: top;

                    .item-num {
                        font-size: 25px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 35px;

                        >span {
                            font-size: 15px;
                            /*position: absolute;*/
                        }
                    }

                    .item-label {
                        margin-top: 5px;
                        font-size: 16px;
                        color: #535763;
                    }

                    &:nth-of-type( 1 ) {
                        width: 90px;
                        position: relative;

                        &:after {
                            content: ' ';
                            display: inline-block;
                            vertical-align: top;
                            width: 1px;
                            height: 40px;
                            background-color: #EEEFF2;
                            position: absolute;
                            right: 0;
                            top: 12px;
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: 160px;
                        position: relative;
                        padding-left: 39px;
                        box-sizing: border-box;

                        .item-label {
                            margin-top: 1px;
                        }

                        &:after {
                            content: ' ';
                            display: inline-block;
                            vertical-align: top;
                            width: 1px;
                            height: 40px;
                            background-color: #EEEFF2;
                            position: absolute;
                            right: 0;
                            top: 12px;
                        }
                    }

                    &:nth-of-type( 3 ) {
                        width: calc( 100% - 160px - 90px );
                        position: relative;
                        padding-left: 36px;
                        box-sizing: border-box;

                        >.item-img {
                            display: inline-block;
                            vertical-align: middle;
                            width: 86px;
                            height: 86px;
                            background-image: url("../../assets/images/gzzd/bg_img.png");
                            background-repeat: no-repeat;
                            background-position: center center;
                            position: relative;
                            top: -13px;
                        }

                        >.el-progress {
                            display: inline-block;
                            vertical-align: top;
                            width: calc( 100% - 86px - 24px );
                            margin-left: 24px;
                            position: relative;
                            top: 19px;

                            .el-progress-bar {
                                padding-right: 0;

                                .el-progress-bar__outer {
                                    height: 18px !important;
                                    background: #FFFFFF;
                                    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
                                    border-radius: 9px;
                                    border: 1px solid #CFD1D8;
                                    padding: 4px;
                                    box-sizing: border-box;

                                    .el-progress-bar__inner {
                                        height: 8px;
                                        border-radius: 4px;
                                        top: 4px;
                                        left: 4px;
                                    }
                                }
                            }

                            .el-progress__text {
                                 display: none;
                            }
                        }

                        >.tooltip-box {
                            color: #333333;
                            font-size: 16px;
                            position: absolute;
                            padding: 0px 7px;
                            box-sizing: border-box;
                            line-height: 35px;
                            background-color: #FFFFFF;
                            border-radius: 8px;
                            border: 1px solid #CFD1D8;
                            text-align: center;
                            min-width: 190px;
                            top: 50px;
                            font-weight: 600;
                            margin-left: 10px;


                            &:after {
                                content: ' ';
                                position: absolute;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 5px solid transparent;
                                border-right: 5px solid transparent;
                                border-top: 8px solid #F9FAFE;
                                top: -8px;
                                border-bottom: 8px solid #F9FAFE;
                                border-top: unset;
                            }

                            &:before {
                                content: ' ';
                                position: absolute;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 6px solid transparent;
                                border-right: 6px solid transparent;
                                border-top: 10px solid #dddddd;
                                top: -10px;
                                border-bottom: 10px solid #dddddd;
                                border-top: unset;
                            }

                        }
                    }
                }
            }

            >.bottom-panel {
                width: 100%;
                height: 820px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;

                >.table-head {
                    height: 48px;
                    line-height: 48px;
                    background: #F9FAFE;
                    width: 100%;
                    display: flex;

                    >span {
                        flex: 1;
                        font-size: 16px;
                        font-weight: 600;
                        color: #0E1526;
                        text-align: center;

                        &:nth-of-type( 1 ) {
                            min-width: 555px;
                            border-right: 1px solid rgba(0, 0, 0, 0.1);
                            box-sizing: border-box;
                        }
                    }
                }

                >.table-body {
                    width: 100%;
                    height: calc( 100% - 48px );

                    >.left-panel {
                        display: inline-block;
                        vertical-align: top;
                        width: 555px;
                        height: 100%;
                        border-right: 1px solid rgba(0, 0, 0, 0.1);
                        box-sizing: border-box;

                        >.item-box {
                            width: 100%;
                            height: 50%;
                            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                            box-sizing: border-box;
                            padding: 100px 0 0 100px;

                            .el-progress {
                                vertical-align: top;

                                .el-progress-circle__track {
                                    stroke: #ffffff;
                                }

                                .el-progress__text {
                                    width: 80px;
                                    height: 80px;
                                    line-height: 80px;
                                    background: rgba(44, 80, 238, 0.07);
                                    border-radius: 50%;
                                    font-size: 23px !important;
                                    font-weight: 600;
                                    color: #000000;
                                    left: 0;
                                    right: 0;
                                    margin: auto;
                                }
                            }

                            .info-box {
                                display: inline-block;
                                vertical-align: top;
                                margin-left: 25px;

                                >.info-row {
                                    line-height: 33px;
                                    position: relative;
                                    top: -5px;

                                    >.info-row-label {
                                        display: inline-block;
                                        width: 85px;
                                        vertical-align: top;
                                        font-size: 16px;
                                        color: #535763;
                                    }

                                    >.info-row-num {
                                        display: inline-block;
                                        vertical-align: top;
                                        font-size: 16px;
                                        font-weight: 600;
                                        color: #0E1526;
                                    }
                                }
                            }

                            &:nth-of-type( 2 ) {

                                .el-progress {

                                    .el-progress__text {
                                        background: rgba(53, 199, 89, 0.08);
                                    }
                                }
                            }
                        }
                    }

                    >.right-panel {
                        display: inline-block;
                        width: calc( 100% - 555px );
                        vertical-align: top;
                        height: 100%;

                        .table-tr {
                            width: 100%;
                            height: 49.4px;
                            line-height: 48.4px;
                            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                            display: flex;
                            box-sizing: border-box;

                            >span {
                                flex: 1;
                                text-align: center;
                                font-size: 14px;
                                color: #0E1526;
                            }

                            &.is_red {
                                background: rgba(255, 59, 48, 0.1);
                                border-color: #FF3B30;

                                >span {
                                    color: #FF3B30;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
